<template>
  <div class="lyricPage">
    <div class="lyric" @click="$parent.showLyric = false">
      <ul ref="list" :style="{ marginTop: `-${lyricHeight}px` }">
        <li
          v-for="(item, index) in lyric"
          :key="index"
          :class="{ active: index == lyricIndex - 1 }"
        >
          <h1>{{ item.text || "---" }}</h1>
          <h3 v-if="showTranslate">{{ item.ttxt }}</h3>
        </li>
      </ul>
    </div>
    <span
      :class="{ active: showTranslate }"
      @click="onshowTranslate"
      v-show="!noTranslate"
      >译</span
    >
  </div>
</template>

<script>
export default {
  props: ["lyric", "total", "current"],
  data: function () {
    return {
      lyricIndex: 0,
      lyricHeight: 0,
      showTranslate: true,
      noTranslate: true,
    };
  },
  created: function () {
    this.lyric.forEach((ele) => {
      if (ele.ttxt) {
        this.noTranslate = false;
      }
    });
  },
  watch: {
    current(n) {
      this.lyricIndex =
        this.lyric.findIndex((ele) => ele.time > n) == -1
          ? Array.from(this.$refs.list.querySelectorAll("li")).length
          : this.lyric.findIndex((ele) => ele.time > n);
    },
    lyricIndex(n) {
      this.lyricHeight = 0;
      let arr = [];
      if (n == -1) {
        arr = Array.from(this.$refs.list.querySelectorAll("li"));
      } else {
        arr = Array.from(this.$refs.list.querySelectorAll("li")).slice(
          0,
          n - 1
        );
      }
      arr.forEach((ele) => {
        this.lyricHeight += ele.offsetHeight;
      });
    },
    lyric(n) {
      n.forEach((ele) => {
        if (ele.ttxt) {
          this.noTranslate = false;
        } else {
          this.noTranslate = true;
        }
      });
    },
  },
  methods: {
    onshowTranslate() {
      this.showTranslate = !this.showTranslate;
      setTimeout(() => {
        if (this.lyricIndex == -1) {
          arr = Array.from(this.$refs.list.querySelectorAll("li"));
        }
        this.lyricHeight = 0;
        let arr = Array.from(this.$refs.list.querySelectorAll("li")).slice(
          0,
          this.lyricIndex - 1
        );
        arr.forEach((ele) => {
          this.lyricHeight += ele.offsetHeight;
        });
      }, 30);
    },
    
  },
};
</script>

<style lang="less" scoped>
.lyricPage {
  width: 100%;
  height: 100%;
  position: relative;
  span {
    position: absolute;
    right: 20px;
    bottom: 0;
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 12px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 10px;
    padding: 0 5px;
    transform: scale(0.9);
    &.active {
      color: rgba(255, 255, 255, 0.9);
      border-color: rgba(255, 255, 266, 0.9);
    }
  }
  .lyric {
    height: calc(100% - 10px);
    overflow: hidden;
    mask-image: linear-gradient(
      to bottom,
      transparent 0% 5%,
      red 15% 85%,
      transparent 95% 100%
    );
    ul {
      display: flex;
      flex-direction: column;
      align-items: center;
      transform: translateY(30vh);
      transition: all 0.3s;

      li {
        padding-bottom: 20px;
        text-align: center;
        color: rgba(255, 255, 255, 0.4);
        &.active {
          color: rgba(255, 255, 255, 0.9);
        }
      }
    }
  }
}
</style>